{# Copyright [2011] [Ilya Rudakov] #}

{# Licensed under the Apache License, Version 2.0 (the "License");#}
{# you may not use this file except in compliance with the License.#}
{# You may obtain a copy of the License at#}

{#     http://www.apache.org/licenses/LICENSE-2.0 #}

{# Unless required by applicable law or agreed to in writing, software#}
{# distributed under the License is distributed on an "AS IS" BASIS,#}
{# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.#}
{# See the License for the specific language governing permissions and#}
{# limitations under the License.#}

<html>
<head>
<title>Job Manager</title>
<style type="text/css">
    
    div#footer {
        position:relative;
        top:20px;
        margin-top: 20px;
        clear:both;
        width:100%;
        border-top:1px solid #d3d3d3;
        border-bottom:1px solid #d3d3d3;
        background-color:#ffffff;
        height:35px;
    }

    .footer_container {
        position:relative;
        color:gray;
        font-size:smaller;
    }

    .application_menu {
        width: 800px;
        /*height: 30px;*/
        background-color: #e8e8e8;
        background-image: url("/static/images/app_menu_bg.png");
        border: 1px solid #c1c1c1;
        margin-left:30px;
        margin-right:30px;
        margin-top:20px;
        padding-left: 7px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    
    .panel {
        padding: 10px;
        background-color: #f0f8ff;
        width: 190px;
    }

    .feed_control_panel {
        position: relative;
        height: 80px;
        padding: 4px;
        margin-top: 10px;
    }

    .java_type {
        background-image: url("/static/images/Javalogo.png");
    }

    .python_type {
        background-image: url("/static/images/Pythonlogo.png");
    }

    .waiting_for_check {
        border-left: 2px solid #c99b01;
        border-bottom: 1px solid #eab400;
        border-top: 1px solid #eab400;
        border-right: 1px solid #eab400;
        background-color: #fedb68;
    }

    .successful_state {
        border-left: 2px solid #0aa900;
        border-bottom: 1px solid #0dea00;
        border-top: 1px solid #0dea00;
        border-right: 1px solid #0dea00;
        background-color: #9efe87;
    }

    .broken_state {
        border-left: 2px solid #7c0104;
        border-bottom: 1px solid #fd3f43;
        border-top: 1px solid #fd3f43;
        border-right: 1px solid #fd3f43;
        background-color: #feb1b3;
    }

    .stateless {
        border-left: 2px solid gray;
        border-bottom: 1px solid #e8e7e7;
        border-top: 1px solid #e8e7e7;
        border-right: 1px solid #e8e7e7;
        background-color: #f4f2f2;
    }

    .feed_group_container {
        margin-left:10px;
        margin-right:10px;
        margin-top:10px;
        padding-top:5px;
        border: 1px dashed #d3d3d3;
        width:650px
    }

    .feed_group {
        margin: 5px;
        padding: 0;
        width: 640px;
    }

    .feed_group_header {
        padding: 5px 10px;
        height:18px;
        position: relative;
        /*background-color: #e8e8e8;*/
        border: 1px solid #b5b5b5;
    }

    .feed_group_body {
        margin-top: 1px;
        padding: 5px 10px 15px;
        background-color: #ffffff;
        border: 1px solid #d3d3d3;
    }

</style>

<script type="text/javascript" src="/static/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.inlineedit.js"></script>
<script type="text/javascript" src="/static/js/jquery-ext.js"></script>
<script type="text/javascript" src="/static/js/state_checker.js"></script>
<script type="text/javascript" src="/static/js/inline_validator.js"></script>

<link type="text/css" href="/static/css/jquery-ui-1.8.7.custom.css" rel="stylesheet"/>
<link type="text/css" href="/static/css/job_manager.css" rel="stylesheet"/>

<link rel="shortcut icon" href="/static/images/python-crystal.png" type="image/x-icon" />

<script type="text/javascript">
    $(document).ready(function() {
        $(".feed_group_body").hide();

        $(".feed_group_open_icon").click(function() {
            var feed_group_open_icon = $(this);
            feed_group_open_icon.parent().next(".feed_group_body").slideToggle(600, function() {
                var closed_icon_class = "ui-icon-triangle-1-e";
                var opened_icon_class = "ui-icon-triangle-1-s";

                if (feed_group_open_icon.hasClass(closed_icon_class)) {
                    feed_group_open_icon.removeClass(closed_icon_class).addClass(opened_icon_class);
                } else if (feed_group_open_icon.hasClass(opened_icon_class)) {
                    feed_group_open_icon.removeClass(opened_icon_class).addClass(closed_icon_class);
                }
            });
        });

        {# This var need for link between confirm window and delete, interrupt buttons #}
        var tmp_feed_control_panel;
        $("#delete_feed_dialog_confirm").dialog({
			resizable: false,
			height:200,
            width:500,
            autoOpen:false,
			buttons: {
				"Delete feed": function() {
                    var feed_id_holder = tmp_feed_control_panel.find(".feed_id_holder");
                    var feed_id = feed_id_holder.text();
                    $.postJSON("/jm/delete_feed", {"feed_id": feed_id}, function(response) {
                        var result = response['result'];
                        if (result) {
                            tmp_feed_control_panel.fadeOut("slow", function() {
                                tmp_feed_control_panel.remove();
                            });
                        }
                    });
					$(this).dialog( "close" );
				},
				Cancel: function() {
					$(this).dialog( "close" );
				}
			}
		});

        var tmp_job_group_id;
        $("#delete_job_group_dialog_confirm").dialog("destroy");
        $("#delete_job_group_dialog_confirm").dialog({
			resizable: false,
			height:200,
            width:500,
            autoOpen:false,
			buttons: {
				"Delete group": function(e) {
                    window.location.href = "/jm/delete_job_group/" + tmp_job_group_id;
					$(this).dialog("close");
				},
				Cancel: function() {
					$(this).dialog("close");
				}
			}
		});

        $("#interrupt_feed_dialog_confirm").dialog({
            resizable:false,
            height:180,
            width:400,
            autoOpen:false,
            buttons: {
                "Interrupt": function() {
                    var feed_id_holder = tmp_feed_control_panel.find(".feed_id_holder");
                    var feed_id = feed_id_holder.text();
                    set_state(tmp_feed_control_panel, WAITING_FOR_CHECK);

                    $.postJSON("/jm/interrupt_feed", {"feed_id": feed_id}, function(response) {
                        $("#dialog-message").find(".dialog-message").text("Feed interrupted!");
                        $("#dialog-message").dialog("open");
                    });
                    $(this).dialog("close");
                },
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        });

        $(".feed_delete_button").click(function(e) {
            var feed_delete_button = $(e.target);
            tmp_feed_control_panel = feed_delete_button.parent().parent();
            $( "#delete_feed_dialog_confirm" ).dialog("open");
        });

        $(".job_group_delete_button").click(function(e) {
            tmp_job_group_id = $(e.target).closest(".feed_group").find(".feed_group_id_holder").text();
            $("#delete_job_group_dialog_confirm").dialog("open");
        });

        $(".interrupt_feed_button").click(function(e) {
            tmp_feed_control_panel = $(e.target).closest(".feed_control_panel");
            $("#interrupt_feed_dialog_confirm").dialog("open");
        });

        $(".start_feed_button").click(function(e) {
            var f_control_panel = $(e.target).closest(".feed_control_panel");
            var feed_id_holder = f_control_panel.find(".feed_id_holder");
            var feed_id = feed_id_holder.text();
            set_state(f_control_panel, WAITING_FOR_CHECK);

            $.postJSON("/jm/start_feed", {"feed_id": feed_id}, function(response) {});
        });

        $(".feed_group_body").sortable({
            connectWith: ".feed_group_body",
            receive: function(e, ui) {
                var feed_group_id_holder = $(e.target).closest(".feed_group").find(".feed_group_id_holder");
                var receiver_group_id = feed_group_id_holder.text();
                var feed_id_holder = $(ui.item).find(".feed_id_holder");
                var feed_id = feed_id_holder.text();
                $.postJSON("/jm/change_group", {"feed_id":feed_id, "receiver_group_id":receiver_group_id}, function(response) {});
            }
        }).disableSelection();

        $(document).ajaxStart(function() {
           $("#ajax_indicator").show();
        }).ajaxStop(function() {
            $("#ajax_indicator").hide();
        });

        $( "#dialog-message" ).dialog({
			modal: false,
            autoOpen:false,
            width:400,
            height:250,
			buttons: {
				Ok: function() {
					$(this).dialog("close");
                    $(this).find(".dialog-message").text("");
				}
			}
		});

        $("#open_all_button").click(function(e) {
            $(".feed_group_open_icon").click();
        });

        $(".job_name").inlineEdit({
            save: function(e, data) {
                var input;
                if ($(e.target).is("input")) {
                    input = $(e.target);
                } else {
                    input = $(e.target).prev("input");
                }

                var job_id_holder = input.closest(".feed_control_panel").find(".feed_id_holder");
                var data = {"job_id": job_id_holder.text(), "name": input.val()};
                $.postJSON("/jm/update_name", data, function(e) {});
            },
            cancelOnBlur: true
        });

        $(".job_description").inlineEdit({
            save: function(e, data) {
                var input;
                if ($(e.target).is("input")) {
                    input = $(e.target);
                } else {
                    input = $(e.target).prev("input");
                }
                var job_id_holder = input.closest(".feed_control_panel").find(".feed_id_holder");
                var data = {"job_id": job_id_holder.text(), "description": input.val()};
                $.postJSON("/jm/update_description", data, function(e) {});
            },
            cancelOnBlur: true
        });

        $(".job_group_name").inlineEdit({
            save: function(e, data) {
                var input;
                if ($(e.target).is("input")) {
                    input = $(e.target);
                } else {
                    input = $(e.target).prev("input");
                }
                var job_gourp_id_holder = input.closest(".feed_group").find(".feed_group_id_holder");
                var data = {"job_group_id": job_gourp_id_holder.text(), "name": input.val()};
                $.postJSON("/jm/update_group_name", data, function(e) {});
            },
            cancelOnBlur: true
        });

        initFeedStateChecker(10000);
    });

    function get_feed_ids() {
        var result = [];
        var feed_id_holders = $(".feed_id_holder");
        $.each(feed_id_holders, function(index, feed_id_holder) {
            var feed_id = feed_id_holder.textContent;
            result.push(feed_id);
        });
        return {"feed_ids": result};
    }

</script>
</head>
<body style="margin: 0">
<div style="position:absolute; top:0; width:100%; background-color:#e7e6e6; height:5px;border-bottom:1px solid #d3d3d3"></div>

<div style="position:absolute;right:10px; top: 10px; font-size:small;">
    <span style="font-weight:bold;">{{ user.email }}</span>
    |
    <a href="/accounts/logout/">Sign out</a>
</div>

<div id="ajax_indicator" class="ajax_indicator_panel ui-corner-bl ui-corner-br">
    <img src="/static/images/ajax-loader.gif">
</div>

<div style="margin-left:30px; margin-right:30px; margin-top:20px; margin-bottom:15px; position:relative;">
    <a href="/jm/index">
        <img src="/static/images/job_manager_logo.png" border="0">
    </a>
    <div style="position:absolute;top:0; left:200px; color:#87cefa;">1.0</div>
</div>

<div style="width:100%; background-color:#e7e6e6; height:5px;border-bottom:1px solid #d3d3d3;border-top:1px solid #d3d3d3"></div>

{# Job Container #}
<div style="float:left;" class="feed_group_container ui-corner-all">
    <div style="padding-left:5px">
        <span id="open_all_button" style="cursor:pointer; text-decoration:underline; border-left:6px solid #75cc75; padding-left:2px">magic button</span>
    </div>

    {#  Job Groups  #}
    {% for feed_group in feed_group_list %}
        <div class="feed_group">

            <span class="feed_group_id_holder" style="display:none;">{{ feed_group.id }}</span>

            <div class="feed_group_header ui-corner-all {% if feed_group.mutable %}ui-widget-header{% endif %}">
                <div class="feed_group_open_icon ui-icon ui-icon-triangle-1-e" style="position:relative;float:left;cursor:pointer;">&nbsp;</div>
                <div style="position:relative;float:left;">
                    <span class="job_group_name">{{ feed_group }}</span>
                    {% if feed_group.mutable %}
                    <span style="position:absolute; left:550px;top:0">
                        <a class="job_group_delete_button" href="#" style="color: #ff5555;">Delete</a>
                    </span>
                    {% endif %}
                </div>
            </div>

            <div class="feed_group_body ui-corner-all">
                {% for feed in feed_group.feed_set.all %}
                    <div class="feed_control_panel {% ifequal feed.type "JAVA" %}java_type{% else %}python_type{% endifequal %} waiting_for_check ui-corner-all">
                        <span style="display:none;" class="feed_id_holder">{{ feed.id }}</span>

                        <div style="float:left;font-weight:bold">
                            <span class="job_name">{{ feed.name }}</span>
                        </div>

                        <div style="clear:both;">
                            <span class="job_description">{{ feed.description }}</span>
                        </div>

                        <div style="position:absolute;right:0; top:0; padding:5px;">
                            <span class="feed_delete_button" style="font-weight:bold;color:red;text-decoration:underline;cursor:pointer;">Delete</span>
                        </div>

                        <div class="feed_run_loader_holder" style="position:absolute;right:0; bottom:0; display:none;">
                            <img src="/static/images/feed_run_loader.gif">
                        </div>

                        <div style="clear:both;font-style:italic;color:gray;">
                            pid: <span class="feed_pid_holder">{{ feed.pid }}</span>
                        </div>

                        <div style="clear:both;padding-top:10px">
                                <span class="start_feed_button" style="display: none;">
                                    <span style="cursor:pointer; text-decoration:underline">start</span> |
                                </span>
                                <span class="interrupt_feed_button" style="display:none;">
                                    <span style="cursor:pointer; text-decoration:underline">interrupt</span> |
                                </span>
                            <a href="/jm/feed_logs/{{ feed.id }}" target="_blank">logs</a> |
                            <a href="/jm/history/{{ feed.id }}" target="_blank">history</a>
                        </div>

                    </div>
                {% endfor %}
            </div>
        </div>
    {% endfor %}

</div>

<div style="float:left; margin-top:13px; margin-left:10px" class="ui-corner-all">
    <div class="form_panel ui-corner-all" style="height:20px;width:385px;">
        <span style="font-weight:bold">Download job template:</span>
        <span>
            <a href="/static/feed_template/python_job.zip" style="text-decoration:underline; color:green;">Python</a> |
            <a href="/static/feed_template/java_worker_template.zip" style="text-decoration:underline; color:green;">Java</a>
        </span>
    </div>

    {# Feed Group creation form #}
    <br>
    <div class="form_panel ui-corner-all" style="height:120px; width:385px;">
        <form id="create_feed_group_form" action="/jm/create_feed_group" method="post">{% csrf_token %}
            <div style="float:left;">
                <label for="id_name" style="font-weight:bold">Group name:</label><br>
                {{ create_feed_group_form.name }}<br>
                <span class="validation_error">
                {% for error in create_feed_group_form.name.errors %}
                    {{ error|escape }}
                {% endfor %}
                </span>
                <br>
            </div>
            <div style="clear:both; padding-top:10px; text-align:right;">
                <hr>
                <input id="create_feed_group_submit" type="submit" value="Create group">
            </div>
        </form>
    </div>

    {# Feed upload form #}
    <br>
    <div class="form_panel ui-corner-all" style="height:420px; width:385px;">
        <form id="upload_feed_form" action="/jm/upload_feed" method="post" enctype="multipart/form-data">{% csrf_token %}
            <div style="float:left;">
                <label for="id_name">Worker name:</label><br>
                {{ upload_feed_form.name }}<br>
                <span class="validation_error">
                {% for error in upload_feed_form.name.errors %}
                    {{ error|escape }}
                {% endfor %}
                </span>
                <br><br>
            </div>
            <div style="float:left; margin-left:25px;">
                <label for="id_feed_group">Worker Group:</label><br>
                {{ upload_feed_form.feed_group }}<br>
                <span class="validation_error">
                {% for error in upload_feed_form.feed_group.errors %}
                    {{ error|escape }}
                {% endfor %}
                </span>
                <br><br>
            </div>
            <div style="clear:both;">
                <label for="id_file">Worker Zip file:</label><br>
                {{ upload_feed_form.file }}<br>
                <span class="validation_error">
                {% for error in upload_feed_form.file.errors %}
                    {{ error|escape }}
                {% endfor %}
                </span>
                <br><br>
                
                <label for="id_description">Description:</label><br>
                {{ upload_feed_form.description }}<br>
                <span class="validation_error">
                {% for error in upload_feed_form.description.errors %}
                    {{ error|escape }}
                {% endfor %}
                </span>
                <br>
            </div>
            <div style="clear:both; padding-top:10px;text-align:right;">
                <hr>
                <input id="upload_feed_submit" type="submit" value="Upload worker">
            </div>
        </form>
    </div>
</div>

<div id="footer">
    <div class="footer_container">
        <div style="margin-left:10px; margin-top:5px; position:absolute;left:0;">
            <a href="http://code.google.com/p/job-manager/" target="_blank">Google Code project link</a> | Apache Licence 2.0 &copy 2011 Ilya Rudakov
        </div>
    </div>
</div>

{#Confirm Dialogs#}
<div id="delete_feed_dialog_confirm" style="display:none;" title="Delete Feed?">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This feed will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<div id="interrupt_feed_dialog_confirm" style="display:none;" title="Interrupt Feed?">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This feed will be interrupted. Are you sure?</p>
</div>
<div id="delete_job_group_dialog_confirm" style="display:none;" title="Interrupt Feed?">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This job group will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

<div id="dialog-message" title="System message">
	<p>
		<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
        <span class="dialog-message"></span>
	</p>
</div>

</body>
</html>